<template>
  <div class="header">
    <!-- 导航栏 -->
    <div class="menu">
      <el-row type="flex" justify="end">
        <el-col :span="4" :pull="16">
          <span
            style="font-size:30px; color:#409EFF; cursor:pointer;"
            @click="$router.push('/index')"
          >海绵宝宝商城</span>
        </el-col>
        <el-col :span="2">
          <el-button
            class="el-btn"
            type="text"
            icon="el-icon-shopping-cart-2"
            @click="go_shopping_cart()"
          >购物车</el-button>
        </el-col>
        <el-col :span="2">
          <!-- <el-button class="el-btn" type="primary" size="mini" icon="el-icon-user" circle></el-button> -->

          <el-dropdown>
            <span class="el-dropdown-link">
              <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item icon="el-icon-user-solid">个人主页</el-dropdown-item>
              <el-dropdown-item>
                <i class="iconfont icon-buchongiconsvg06-copy"></i>修改密码
              </el-dropdown-item>
              <el-dropdown-item>
                <i class="iconfont icon-116"></i>退出登录
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userID: "",
    };
  },

  methods: {
    go_shopping_cart() {
      // this.$router.push("/shopping_cart");
      let userInfo = JSON.parse(sessionStorage.getItem("userInfo"));
      // console.log(userInfo);
      this.userID = userInfo.id;
      this.$router.push({
        path: "/shopping_cart",
        query: {
          id: this.userID,
        },
      });
    },
  },
};
</script>

<style>
.header {
  margin: 10px 0px;
}

.menu {
  width: 1200px;
  min-width: 1200px;
  max-width: 1200px;
  margin: 0 auto;
}
</style>
